<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        *{padding: 0;margin: 0;}
        
        p {
            height: 40px;
            line-height: 40px;
            border: 1px dashed #333;
        }

    </style>
</head>
<body>
    <!-- HTML属性的属性名只能是小写,如果写成大写会自动转化为小写 -->

    <div id="app">

        <!-- 将data中挂载的数据,作为html属性的属性值  -->
        <p :id="id" :class="className">01</p>
        
        <!-- 动态参数 将data中挂载的数据,作为html属性的属性名 -->
        <button @click="changeHandler">change</button>
        <p v-bind:[attr_name]="attrVal">02</p>
    </div>
</body>
<script>

    /* 
        v-bind 属性绑定, 将data中挂载的数据,作为html属性的属性值 (作为属性名也可以!)

            语法:
            v-bind:参数="指令值"
                参数:需要绑定的属性名
                指令值:  需要绑定的属性值(javascript表达式 变量  方法 三目运算符)

            注意:
                1.  如果v-bind的指令的值是null和undefined, 对应属性不会绑定到元素上
                2.  v-bind将data中挂载的数据,作为html属性的属性值 (如果指令的值不是字符串类型, 会隐式转化为字符串(xxx.toString()))

            v-bind简写:
                v-bind可以省略不写,从:开始写  如果v-bind:id="xxx"  => :id="xxx"


            v-bind可以直接绑定一个对象, 此时对象的键名需要绑定属性的属性名, 对象的键值,需要绑定的属性的属性值
                a. 此时v-bind不能简写
                b. HTML属性的属性名只能是小写,如果写成大写会自动转化为小写

        v-bind动态参数
            将data中挂载的数据,作为html属性的属性名
                a. 此时v-bind可以简写
                b.  HTML属性的属性名只能是小写,如果写成大写会自动转化为小写

            语法:
                v-bind:[动态参数] = "指令值"
                :[动态参数] = "指令值"
    */

    var vm = new Vue({
        el:"#app",
        data:{
            id:"demo",
            className:"one",

            attr_name:"id",
            attrVal:"demo",
        },
        methods: {
            changeHandler(){
                this.attr_name = "class";
                this.attrVal = "one";
            }
        }
    })

</script>
</html>